<template>
	<view>
		<uni-card title="用途">
			<view>应用中一些数据需要长时间存储，比如存储用户登录凭据来实现一段时间内的免登录，再比如一些从服务端获取的不常变化的字典数据需要做前端缓存来避免重复的请求开销。</view>
		</uni-card>
		
		<uni-card title="介绍">
			<view>1.源代码位于：/common/utils/cache.js</view>
			<view>2.缓存数据以键值对的方式存储，在设置缓存时除了要传递键和值以外，可额外设置数据的过期时间，若未设置过期时间，则有一个默认的时间，可在环境变量defaultCacheStoreTime中设置。</view>
			<view>3.在获取缓存数据时，可额外传递一个获取数据的方法，当要获取的数据不存在或者过期时，会自动调用方法去重新获取数据。</view>
		</uni-card>
		
		<uni-card title="使用样例">
			<button
				type="primary"
				block
				@tap="setCacheTest"
			>设置缓存数据</button>
			<button
				style="margin-top: 24rpx;"
				type="primary"
				block
				@tap="getCacheTest"
			>获取缓存数据</button>
			<button
				style="margin-top: 24rpx;"
				type="primary"
				block
				@tap="removeCacheTest"
			>清除单个缓存数据</button>
			<button
				style="margin-top: 24rpx;"
				type="primary"
				block
				@tap="clearCacheTest"
			>清除所有缓存数据</button>
		</uni-card>
	</view>
</template>

<script>
	import { confirm, showLoading, hideLoading } from '../../../common/utils/feedback'
	import { setCache, getCache, removeCache, clearCache } from '../../../common/utils/cache'
	
	const TEST_CACHE_KEY = 'TEST_CACHE'
	const testData = { 'name': '张三', age: 18 }
	
	// 模拟从接口异步获得数据
	const mockQueryData = () => {
	  return new Promise(resolve => {
	    showLoading()
	    setTimeout(() => {
	      hideLoading()
	      resolve(testData)
	    }, 3000)
	  })
	}
	
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			setCacheTest () {
			    setCache(TEST_CACHE_KEY, testData, '2030-11-11 12:00:00')
			},
			async getCacheTest () {
			    const data = await getCache(`${TEST_CACHE_KEY}_1`, {
					getDataFn: mockQueryData,
					expiredTime: '2030-12-12 12:00:00'
			    })
			    confirm(`缓存数据为：${JSON.stringify(data)}`)
			},
			removeCacheTest () {
			    removeCache(TEST_CACHE_KEY)
			},
			clearCacheTest () {
			    clearCache()
			}
		}
	}
</script>

<style></style>
